import React from 'react'

interface ListProps {
  query: string
}

const List: React.FC<ListProps> = ({ query }: ListProps) => {
  const text = 'hello world'
  const items = []
  if (query !== '' && text.includes(query)) {
    const arr = text.split(query)
    for (let i = 0; i < 10000; i++) {
      items.push(<li key={i}><span style={{ color: 'red' }}>{query}</span>{arr[1]}</li>)
    }
  } else {
    for (let i = 0; i < 10000; i++) {
      items.push(<li key={i}>{text}</li>)
    }
  }
  return (
    <>
      <ul>{items}</ul>
    </>

  )
}
export default React.memo(List)
